import React, { useState } from "react";
import Button from "@mui/material/Button";
import "./index.less";
import logo from "@/assets/images/logo.png";
import { TextField } from "@mui/material";
import { LoginApi, RegisterApi } from "../../api/index";
import { useNavigate } from "react-router-dom";
import { useDispatch } from "react-redux";
import { Dispatch } from "redux";
import useToast, { useToastError } from "../../hooks/useToast";
// import { validatePhoneNuber } from "../../util";

export default function Login() {
  // 使用一个状态表示,当前是注册还是登录
  const nav = useNavigate();
  const [isReg, setIsReg] = useState(false);
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("wolfcode123");
  const [phone, setPhone] = useState("");
  // useDispatch 是可以让我们决定传递什么样的action进去的
  const dispath = useDispatch<Dispatch<IToastAction>>();
  const toast = useToast();
  const error = useToastError();
  const register = () => {
    RegisterApi({
      phone,
      password,
      // }).then((res) => {
      //   if (res.errCode === 0) {
      //     // alert("注册成功,前往登录页面");
      //     dispath({
      //       type: "SHOW_TOAST",
      //       payload: {
      //         toastMessage: "注册成功,前往登录页面",
      //         toastType: "success",
      //       },
      //     });
      //     setIsReg(!isReg);
      //     setPassword("wolfcode123");
      //   }
      // });
    })
      .then((res) => {
        if (res.errCode === 0) {
          // alert("注册成功,前往登录页面");
          toast("success", "注册成功,前往登录页面");
          setIsReg(!isReg);
          setPassword("wolfcode123");
        }
      })
      .catch((err: any) => {
        error("注册失败");
      });
  };
  const login = () => {
    LoginApi({
      username,
      password,
    })
      .then((res) => {
        // console.log(res);
        // console.log(res.data);
        if (res.errCode === 0) {
          let token = res.data;
          localStorage.setItem("x-auth-token", token);
          // alert("登录成功");
          toast("success", "登录成功");
          nav("/home");
        }
      })
      .catch((err: any) => {
        error("登录失败");
      });
  };
  const btnClick = () => {
    // 获取到输入框的内容，并且做一些数据校验
    isReg ? register() : login();
  };

  return (
    <div className="login">
      <div className="logo">
        <img src={logo} alt="" />
      </div>
      <div className="row">
        <TextField
          fullWidth
          size="small"
          placeholder="请输入手机号"
          value={!isReg ? username : phone}
          onChange={(e) =>
            !isReg ? setUsername(e.target.value) : setPhone(e.target.value)
          }
        />
      </div>
      <div className="row">
        <TextField
          fullWidth
          size="small"
          type="password"
          placeholder="请输入密码"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
        />
      </div>
      <div className="row">
        <Button fullWidth variant="contained" onClick={btnClick}>
          {isReg ? "注册" : "登录"}
        </Button>
      </div>
      <div className="row">
        <Button
          variant="text"
          onClick={() => {
            setIsReg(!isReg);
            setPassword("");
          }}
        >
          去{!isReg ? "注册" : "登录"}
        </Button>
      </div>
    </div>
  );
}
